<template>
	<view class="add-account">
		 <form @submit="formSubmit">
  

			<view class="section">
				<view class="iconfont icon-zhanghu-copy"></view>
				<input name="name" placeholder="请输入帐户名称" />
			</view>
			
			<view class="section">
				<view class="iconfont icon-yue"></view>
				<input name="balance" type="digit" placeholder="请输入帐户余额"  />
			</view>
			
			<view class="section">
				<view class="uni-list">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="account_type_id = item.id" v-for="(item,index) in accountTypeList" :key="index">
						<view class="uni-media-list">
							<image class="uni-media-list-logo" :src="item.logo_image"></image>
							<view class="uni-media-list-body">
								<view class="">
									{{item.name}}
									
								</view>
								<view v-if="account_type_id == item.id" class="iconfont icon-xuanzhong uni-pull-right"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="btn-area">
				<button formType="submit">添加</button>
			  
			   
			</view>
		</form>
	</view>
</template>

<script>
	import base from '../../common/base.js';
	
	export default {
		data() {
			return {
				accountTypeList: [],
				account_type_id: '',
			};
		},
		
		mounted() {
			console.log('mounted');
			this.getAccountTypeList();
		},
// 		onLoad() {
// 			console.log('onload');
// 			this.getAccountTypeList();
// 		},
		methods: {
			
			getAccountTypeList : function() {
				var that = this;
				
				base.base.request({
					url: 'account/accountTypeList',
					sCallback: function(res) {
						if(res.code == 200) {
							that.accountTypeList = res.data;
						}
					}
				});
			},
			
			radioChange: function (e) {
				this.account_type_id = e.detail.value;
				// console.log('radio发生change事件，携带value值为：' + e.detail.value)
			},
			
			formSubmit: function (e) {
				var formData = e.detail.value;
				formData.account_type_id = this.account_type_id;
				
				if(formData.name == '') {
					base.base.alert('请输入帐户名称'); return false;
				}
				
				if(formData.balance == '') {
					base.base.alert('请输入余额'); return false;
				}
				
				if(formData.account_type_id == '') {
					base.base.alert('请选择帐户类型'); return false;
				}
				
				var that = this;
				var nui = nui;
				
				base.base.request({
					data: formData,
					url: 'account/add',
					sCallback: function(res){
						if(res.code == 200){
							uni.navigateBack({
								delta: 1
							});
						}
					}
				});
				
			}
		}
	}
</script>

<style>
.add-account{
		width: 100%;
		margin-bottom: 100upx;
		color: #fff;
	}
	form{
		padding: 40upx;
		flex: 1;
	}
	
	.section{
		border-bottom: 1upx solid #eee;
		line-height: 80upx;
		font-size: 24upx;;
	}
	
	.section .iconfont{
		font-size: 32upx;;
	}
	
	.section input{
		flex: 1;
		height: 80upx;
		line-height: 80upx;
		padding: 0 30upx;
	}
	
	.btn-area{
		margin-top: 40upx;
	}
	button{
		width: 100%;
		background: linear-gradient(143deg,rgba(129,95,250,1) 0%,rgba(78,106,240,1) 100%);
		position: fixed;
		color: #fff;
		bottom: 0;
		left: 0;
		border-radius: 0;
	}
	

	
	.uni-media-list-body{
		justify-content: space-between;
		flex-direction: row;
	}
	
	.uni-media-list-body .iconfont{
		font-size: 80upx;
		color: #e60012;
	}
</style>
